<template>
    <div class="list">

        <Content v-bind="foodLsit">
    <!-- 在template上,通过v-slot指令接受来自组件内部的作用域插槽传的值组成的对象,我们可以直接通过解构接受对应的值 -->
        <template v-slot:typeList="{ list }">
            <ol>
                <li v-for="item in list" :key="item">{{ item }}</li>
            </ol>
        </template>
        </Content>

        <Content v-bind="gameList">
        <template #typeList="{ list }">
            <ul>
                <li v-for="item in list" :key="item">{{ item }}</li>
            </ul>
        </template>
        </Content>
    </div>
</template>

<script>
import Content from "./components/Content"
export default {
    name:"App",
    components:{
        Content
    },
    data() {
        return {
            foodList: {
                type: "食物",
                list: ["海鲜", "豆皮", "牛肉"],
            },
            gameList: {
                type: "游戏",
                list: ["DNF", "LOL", "DOTA", "CS"],
            },
        };
    },
}
</script>

<style scoped>
.list {
  display: flex;
  justify-content: space-between;
}
</style>